import React from 'react';
import { Layout, Menu } from 'antd';
import {
  DashboardOutlined,
  UserOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons';
import { Link, useLocation } from 'react-router-dom';

const { Sider } = Layout;

const AppSider = ({ collapsed, setCollapsed }) => {
  const location = useLocation();

  const menuItems = [
    {
      key: '/user',
      icon: <UserOutlined />,
      label: <Link to="/user">用户管理</Link>,
    },
  ];

  return (
    <Sider
      trigger={null}
      collapsible={true}
      collapsed={collapsed}
      style={{
        overflow: 'auto',
        height: 'calc(100% - 64px)',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}
    >
      <div>
        {/* Logo区域 */}
        <div
          style={{
            height: 64,
            padding: '0 16px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: collapsed ? 'center' : 'flex-start',
            borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
          }}
        >
          {!collapsed && <span style={{ color: 'white', fontWeight: 'bold' }}>管理系统</span>}
          {collapsed && <DashboardOutlined style={{ color: 'white', fontSize: '20px' }} />}
        </div>

        {/* 菜单区域 */}
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[location.pathname]}
          items={menuItems}
          style={{ borderRight: 0, flex: 1 }}
        />
      </div>

      {/* 底部缩放按钮 */}
      <div
        style={{
          padding: '16px',
          borderTop: '1px solid rgba(255, 255, 255, 0.1)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: collapsed ? 'center' : 'flex-start',
          cursor: 'pointer',
          color: 'white',
        }}
        onClick={() => setCollapsed(!collapsed)}
        role="button"
        tabIndex={0}
        onKeyPress={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault(); // 阻止空格默认滚动行为
            setCollapsed(!collapsed);
          }
        }}
      >
        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
          style: { fontSize: '18px' },
        })}
        {!collapsed && <span style={{ marginLeft: '8px' }}>收起菜单</span>}
      </div>
    </Sider>
  );
};

export default AppSider;
